<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.bigbox img{
				width: 20px;
				height: 20px;
				border-radius: 50%;
				float: left;
				
			}
			.bigbox{
				width: 200px;
				height: 100px;
				border: 1px solid red;
				
			}
			.review{
				float: left;
			}
			i{
				display: block;
				float: left;
			}
		</style>
		
	</head>
	<body>
		<textarea name="" id="" cols="30" rows="10"></textarea>
		<button>回复评论</button>
		<div class="bigbox" style="display: none;">
			<img src="1.jpg" alt="">
			<i>清风徐来	:</i>
			<div class="review">
				hello world
			</div>
		</div>
		
		<script>
			// 获取textarea元素
			const textarea=document.querySelector('textarea');
			// 获取对象
			const bigbox=document.querySelector('.bigbox');
			// 注册键盘事件
			// 回调函数的一个参数就是事件对象
			textarea.addEventListener('keyup',function(e){
				// console.log(e);
				// 获取键盘按键
				console.log(e.key);
				// 
				if(e.key=='Enter')
				{
					// 去空格
					if(textarea.value.trim()!=='')
					{
						// 让display改为显示
						bigbox.style.display='block';
						// 把显示的元素插入到bigbox
						bigbox.innerHTML=textarea.value;
					}
					// // console.log('我按下了enter键')
					// console.log(textarea.value);
					textarea.value='';
				}
				
			})
		</script>
	</body>
</html>